<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.contain{
				background-color: darkolivegreen;
				display: flex;
			}
		</style>
	</head>
	<body>
		<!-- flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 -->
		<!-- 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

 		建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。 -->
		<div class="contain">
		<div style="width: 100px; height: 100px; background-color: #6495ED;flex: 1 1 auto;">1</div>
		<div style="width: 100px; height: 200px; background-color: #ADFF2F;">2</div>
		<div style="width: 100px; height: 300px;background-color: #B8860B;">3</div>
		<div style="width: 100px; height: 400px; background-color: #FFF0F5;">4</div>
		</div>
	</body>
</html>
